<template>
	<view class="content">
		<view class="top">
			<view class="go_back" @click="go_back">
				<image src="../../../static/img/back.png" mode=""></image>
			</view>
			<view class="dname">
				霞客文章
			</view>

		</view>
		<view class="wengzhan">
			<view class="wengzhan_top">
				<image :src="wenzhang.wz_img" mode=""></image>
			</view>
			<view class="airtical">
				<view class="user">
					<view class="avatar">
						<image :src="wenzhang.user_img" mode=""></image>
					</view>
					<view class="name">
						<view style="font-size: 30px;">
							{{wenzhang.user_name}}
						</view>
					</view>
					<view class="guanzhu" style="">关注</view>
				</view>
				<view class="passage">
					<view class="caption " style="font-size: 30px; font-weight: bolder;text-align: center;">
						{{wenzhang.wz_title}}
					</view>
					<view class="main" style="">
						<rich-text :nodes="wenzhang.wz_content"></rich-text>
					</view>
				</view>
			</view>
			<view class="review">
				<view class="review_top">
					转发4
					评论10
				</view>
				<view class="review_title">
					<text style="font-weight: bolder; font-size: 50rpx;">热门评论</text>
				</view>
				<view class="review_one">
					<view class="user_smal">
						<view class="avatar_small">
							<image src="../../../static/img/avatar1.png" mode=""></image>
						</view>
						<view class="name_samll">
							<view style="font-size: 20px;">
								djal
							</view>
							<view style="color: #c2c2c1; font-size: 10px;"> 2022-7-28</view>
						</view>
					</view>
					<view class="review_content">
						<text
							style="font-size: 35rpx;">结合以上犯罪特点、原因和审判经验，小渡给大家总结出以下防范电信网络诈骗犯罪的对策及建议，一起来看看这份“反诈宝典”吧！</text>
					</view>
					<view class="review_icon">
						<image src="../../../static/img/dianzan.png" mode="">10</image>
						<image src="../../../static/img/share_icon.png" mode="">4</image>
						<image src="../../../static/img/transform_icon.png" mode="">20</image>
					</view>
				</view>
				<view class="review_one">
					<view class="user_smal">
						<view class="avatar_small">
							<image src="../../../static/img/avatar2.png" mode=""></image>
						</view>
						<view class="name_samll">
							<view style="font-size: 20px;">
								fhkl
							</view>
							<view style="color: #c2c2c1; font-size: 10px;"> 2022-7-28</view>
						</view>
					</view>
					<view class="review_content">
						<text style="font-size: 35rpx;">疯狂玩一款名为《羊了个羊》的小程序游戏。沉沦于通关游戏为省争光，却，通不了关，白看一夜广告。
						</text>
					</view>
					<view class="review_icon">
						<image src="../../../static/img/dianzan.png" mode="">10</image>
						<image src="../../../static/img/share_icon.png" mode="">4</image>
						<image src="../../../static/img/transform_icon.png" mode="">20</image>
					</view>
				</view>
				<view class="review_one">
					<view class="user_smal">
						<view class="avatar_small">
							<image src="../../../static/img/avatar3.png" mode=""></image>
						</view>
						<view class="name_samll">
							<view style="font-size: 20px;">
								小新
							</view>
							<view style="color: #c2c2c1; font-size: 10px;"> 2022-7-28</view>
						</view>
					</view>
					<view class="review_content">
						<text style="font-size: 35rpx;">小渡给大家总结出以下防范电信网络诈骗犯罪的对策及建议，一起来看看这份“反诈宝典”吧！</text>
					</view>
					<view class="review_icon">
						<image src="../../../static/img/dianzan.png" mode="">10</image>
						<image src="../../../static/img/share_icon.png" mode="">4</image>
						<image src="../../../static/img/transform_icon.png" mode="">20</image>
					</view>
				</view>
				<view class="review_one">
					<view class="user_smal">
						<view class="avatar_small">
							<image src="../../../static/img/avatar4.png" mode="">
						</view>
						<view class="name_samll">
							<view style="font-size: 20px;">
								蜡笔小新
							</view>
							<view style="color: #c2c2c1; font-size: 10px;"> 2022-7-28</view>
						</view>
					</view>
					<view class="review_content">
						<text
							style="font-size: 35rpx;">结合以上犯罪特点、原因和审判经验，小渡给大家总结出以下防范电信网络诈骗犯罪的对策及建议，一起来看看这份“反诈宝典”吧！</text>
					</view>
					<view class="review_icon">
						<image src="../../../static/img/dianzan.png" mode="">10</image>
						<image src="../../../static/img/share_icon.png" mode="">4</image>
						<image src="../../../static/img/transform_icon.png" mode="">20</image>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				wenzhang: {},
			}
		},
		onLoad(options) {
			var id = JSON.parse(options.id);
			console.log("id=" + id);
			var that = this;
			var data = require("static/data/old_wenzhang.json");
			that.old_wenzhang = data["old_wenzhang"];
			// console.log(that.new_enzhang)
			for (var i = 0; i < that.old_wenzhang.length; i++) {
				console.log(that.old_wenzhang[i].id)
				if (that.old_wenzhang[i].id == id) {
					console.log(id)
					that.wenzhang = that.old_wenzhang[i];
					break;
				}
			}


		},
		methods: {
			go_back() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style>
	page {
		background-image: url(/static/img/backbg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed
	}

	img {
		width: 100%;
		text-indent: 1em;
	}

	.top {
		/* border: #ACC3D4 solid 1px; */
		width: 750rpx;
		height: 50px;

		/* margin-bottom: 30rpx; */
		display: flex;
		flex-direction: row;
		background-color: #CCE5ED;
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.go_back {
		/* border: #ACC3D4 solid 1px; */
		width: 25px;
		height: 25px;
		margin: 13px;

	}

	.go_back image {
		width: 100%;
		height: 100%;
	}

	.dname {
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		padding-right: 100rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bolder;

		/* border: red solid 1px; */
	}


	.wengzhan {
		width: 750rpx;
		/* height: 744px; */
		justify-content: center;
		/* background-color: rgba(204,229,237,0.6); */
	}

	.airtical {
		width: 750rpx;
		/* height: 330px; */
		background-color: #fbfafa;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.wengzhan_top {
		/* border: red solid 1px; */
		width: 750rpx;

	}

	.wengzhan_top image {
		width: 750rpx;

	}

	.user {
		/* border: red solid 1px; */
		width: 750rpx;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		background-color: #CCE5ED;
		border-radius: 0 0 30rpx 30rpx;
	}

	.avatar {
		width: 130rpx;
		height: 130rpx;
		border-radius: 180px;
		/* border: 1px solid #000000; */
		margin: 10rpx 30rpx;
		overflow: hidden;
		box-shadow: 3rpx 5rpx 5rpx 5rpx #c2c2c1;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.name {
		/* border: red solid 1px; */
		line-height: 150rpx;
		width: 300rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		/* margin: 20px 0px; */
	}

	.guanzhu {
		/* border: red solid 1px; */
		width: 200rpx;
		margin-top: 30rpx;
		height: 90rpx;
		margin-left: 20rpx;
		border-radius: 20rpx;
		background-color: #9ED8D8;
		text-align: center;
		line-height: 90rpx;
		color: #000000;
		font-size: 48rpx;

	}

	.passage {
		/* border:  red solid 1px; */
		width: 750rpx;
		/* height: 250px; */
		margin-top: 20px;
		padding-bottom: 20rpx;
	}

	.caption {
		margin: 0px 10px;
	}

	.main {
		/* border:  red solid 1px; */
		width: 700rpx;
		/* height: 190px; */
		margin: auto;
	}

	.main p {
		text-indent: 2em;
		font-size: 20px;
	}

	.review {
		width: 750rpx;
		height: 100%;
		background-color: #fbfafa;
		margin-top: 20px;
	}

	.review .review_top {
		width: 750rpx;
		height: 25px;
		border-bottom: #c2c2c1 1px solid;
		color: #000000;
		font-size: 45rpx;
		letter-spacing: 20rpx;
	}

	.review_title {
		width: 750rpx;
		height: 30px;
	}

	.review_one {
		width: 750rpx;
		height: 150px;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #c2c2c1;
	}

	.user_smal {
		width: 750rpx;
		height: 50px;
		display: flex;
		flex-direction: row;
	}

	.avatar_small {
		width: 30px;
		height: 30px;
		border-radius: 180px;
		margin: 5px 20px;
	}

	.avatar_small image {
		width: 100%;
		height: 100%;
		border-radius: 180px;
	}

	.name_samll {
		width: 100px;
		height: 30px;
		display: flex;
		flex-direction: column;
		margin: 3px 0px;
	}

	.review_content {
		width: 700rpx;
		height: 50px;
		margin: auto;
	}

	.review_icon {
		width: 700rpx;
		height: 90rpx;
		margin: 14px 0px;
	}

	.review_icon image {
		width: 20px;
		height: 22px;
		margin-left: 20px;
	}
</style>
